<template>
	<view>
		<block v-if="value">
			<view class="cu-item default-view space-between  bg-white margin-lr margin-bottom " :class="['style-'+stype]" @tap="goDetail()"
			 v-if="stype=='list'">
				<view class="goods-thumb bg-gray">
					<image mode="aspectFill" :src="value.thumb"></image>
				</view>
				<view class="goods_info w100 margin-tb-xs margin-lr-sm">
					<view class="title text-lg text-overflow-2">{{value.title}}</view>
					<view class="text-price text-red text-lg">{{value.lecturer_name}}</view>
					<view class="space-between text-gray">
					</view>
				</view>
			</view>
			<view class=" default-view  radius margin-bottom bg-white " :class="['style-'+stype,'column'+col,'index'+indexvalue]"
			 @tap="goDetail()" v-else-if="stype=='map'">
				<view class="goods-li overflow">
					<view class="goods-thumb">
						<image :src="value.thumb" mode="widthFix" v-if="col==1"></image>
						<image :src="value.thumb" mode="aspectFill" v-else></image>
					</view>
					<view class="goods-name margin-lr-sm text-black margin-top-sm text-overflow">{{value.title}}</view>
					<view class="goods-bottom margin-lr-sm margin-top-xs margin-bottom-sm text-gray text-sm">{{value.lecturer_name}}</view>
				</view>
			</view>
			<view class=" default-view  margin-bottom bg-white" :class="['style-'+stype,'column'+col,'index'+indexvalue]" @tap="goDetail()"
			 v-else-if="stype=='swiper'">
				<view class="goods-li overflow" :class="col==1?'text-lg':'text-sm'">
					<view class="goods-thumb">
						<image :src="value.thumb" mode="aspectFill" style="height: 300rpx;"></image>
					</view>
					<block v-if="col==1">
						<view class="goods-name margin-lr-sm text-black margin-top-sm text-overflow-2">{{value.title}}</view>
						<view class="goods-bottom margin-lr-sm space-between margin-top-sm margin-bottom-sm">
						</view>
					</block>
					<block v-if="col==2">
						<view class="goods-name  text-black margin-top-sm text-overflow-2">{{value.title}}</view>
						<view class="goods-bottom margin-lr-sm space-between margin-top-sm margin-bottom-xs">
						</view>
					</block>
					<block v-if="col==3">
						<view class="goods-name margin-lr-xs text-black margin-top-xs text-overflow-2">{{value.title}}</view>
						<view class="goods-bottom margin-lr-xs space-between margin-top-xs ">
						</view>
					</block>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Object,
				default: null
			},
			stype: {
				type: String,
				default: "one"
			},
			col: {
				type: String,
				default: "1"
			},
			indexvalue: {
				type: String,
				default: "1"
			},
		},
		created: function(e) {
			console.log(this.value)
		},
		data() {
			return {
				CLOUDPATH: this.$config.cloudPath,
				}
		},
		methods: {
			goDetail() {
				if (this.value.type == 1) {
					uni.navigateTo({
						url: '/collegePackages/pages/college/live/live?id=' + this.value.id
					})
				} else if (this.value.type == 2 || this.value.type == 3) {
					// #ifdef MP-WEIXIN
					let url = this.$config.H5Path + "/collegePackages/pages/college/video/detail?id=" + this.value.id + "&token=" + uni.getStorageSync('token')
					console.log(url)
					this.$common.setCache('webview_url', url,10*60)
					uni.navigateTo({
						url: "/pages/site/webview"
					})
					// #endif 
					
					// #ifdef H5
					uni.navigateTo({
						url: '/collegePackages/pages/college/video/detail?id=' + this.value.id
					})
					// #endif 
				}
			}
		},
	}
</script>

<style>
	.style-map {}

	.style-list {}

	.goods-li {
		/* border: 1px solid #E0E0E0; */
		border-radius: 5px;
	}

	.goods-li .goods-thumb {
		width: 100%;
		/* min-height: 280rpx; */
		overflow: hidden;
	}

	.goods-thumb image {
		width: 100%;
		height: 100%;
	}

	.goods-li .goods-name {
		text-align: justify;
		overflow: hidden;
	}

	.goods-li .goods-bottom {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
	}

	.goods_info {
		height: 200rpx;
		overflow: hidden;
	}

	.goods_info .title {
		height: 100rpx;
		line-height: 50rpx;
		overflow: hidden;
	}

	.goods_info .text-price {
		margin: 10rpx 0;
	}

	.column1 {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.column1 .goods-name {
		font-size: 32rpx;
		line-height: 50rpx;
	}

	.column2 .goods-name {
		line-height: 40rpx;
		height: 40rpx;
	}

	.column2.index0 {
		margin-left: 20upx;
		margin-right: 10upx;
	}

	.column2.index1 {
		margin-right: 20upx;
		margin-left: 10upx;
	}

	.column3.index0 {
		margin-left: 20upx;
		margin-right: 10upx;
	}

	.column3.index1 {
		margin-left: 10upx;
		margin-right: 10upx;
	}

	.column3.index2 {
		margin-left: 10upx;
		margin-right: 20upx;
	}

	.column1 .goods-thumb {
		min-height: 280rpx;
	}

	.column2 .goods-thumb {
		height: 200rpx;
	}

	.column3 .goods-thumb {
		height: 200rpx;
	}

	.style-rush {
		margin-left: 5upx !important;
		margin-right: 5upx !important;
	}

	.column1 .goods-name2 {
		line-height: 40rpx;
		height: 40rpx;
	}

	.column3 .goods-name2,
	.column2 .goods-name2 {
		line-height: 30rpx;
		height: 30rpx;
	}

	.style-list .goods-thumb {
		width: 220rpx;
		height: 220rpx;
		min-width: 220rpx;
	}

	.style-swiper {
		margin-left: 10rpx !important;
		margin-right: 10rpx !important;
	}

	.style-swiper.column1 {}

	.thumb-height {
		height: 240rpx;
	}
</style>
